<template>
    <div id="pdfDom1" >
        <el-card class="" >
            <div style="border:2px solid #2AB28B;margin-top: 10px;padding: 20px 20px;">
                <div style="display:flex;">
                    <div style="font-weight:bold;">
                        姓名：{{ userinfo.username }}
                    </div>
                    <div style="font-weight:bold;margin-left: 50px;">
                        年龄：{{ userinfo.birth }}
                    </div>
                    <div style="font-weight:bold;margin-left: 50px;">
                        性别：{{ userinfo.sex==2?'男':'女' }}
                    </div>
                    <div style="font-weight:bold;margin-left: 50px;">
                        身高：{{ userinfo.height }}
                    </div>
                </div>
                <div style="display:flex;margin-top: 20px;">
                    <div style="font-weight:bold;">
                        体重：{{ userinfo.weight }}
                    </div>
                    <div style="font-weight:bold;margin-left: 50px;">
                        监护人：{{ userinfo.guardian_name }}
                    </div>
                    <div style="font-weight:bold;margin-left: 50px;">
                        监护人手机号：{{ userinfo.guardian_mobile }}
                    </div>
                </div>
                <div style="font-weight:bold;margin-top: 10px;color:red;font-weight: bold;">
                注:该表格筛查对象:1个月-18岁住院儿童，入院后24h内评估。前两项问题由儿科医生评估，后两项与父母或护理人员进行讨论后填写，回答“不清楚”的问题被归类为“否”。
            </div>
            </div>
            <div style="border:2px solid #2AB28B;padding: 10px 20px;border-top: none;">
                <div style="font-size:20px;font-weight:bold;">
                    1、主管临床评分(1分)  
                </div>
                <div style="margin-left:20px;margin-top: 10px;">
                    <el-radio-group v-model="radio1" class="ml-4" @change="radi1">
                        <el-radio label="1" size="large" border>患儿皮下脂肪菲薄、肌肉的减少、脸颊深陷等               <span  style="margin-left:50px">1分</span></el-radio>
                        <el-radio label="0" size="large" border>反之               <span  style="margin-left:50px">0分</span></el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div style="border:2px solid #2AB28B;padding: 10px 20px;border-top: none;"  @change="radi2">
                <div style="font-size:20px;font-weight:bold;">
                    2、疾病严重程度(0-2分)  
                </div>
                <div style="margin-left:20px;margin-top: 10px;margin-bottom: 10px;">
                    <el-radio-group v-model="radio2" class="ml-4">
                        <el-radio label="2" size="large" border>有高风险疾病               <span  style="margin-left:50px">2分</span></el-radio>
                        <el-radio label="0" size="large" border>无               <span  style="margin-left:50px">0分</span></el-radio>
                    </el-radio-group>
                </div>
                <div style="display:flex;margin-left:20px;">
                    <div class="risk_1"> (1)神经性厌食</div>
                    <div class="risk_1">(2)烧伤</div>
                    <div class="risk_1">(3)支气管发育不良(最大年龄2岁)</div>
                    <div class="risk_1">(4)腹腔疾病</div>
                </div>
                <div style="display:flex;margin-left:20px;margin-top: 10px;">
                    <div class="risk_1">(5) 囊性纤维化</div>
                    <div class="risk_1">(6)成熟障碍/早产(校正年龄6个月)</div>
                    <div class="risk_1">(7)慢性心脏病</div>
                    <div class="risk_1">(8)传染病 (艾滋病)</div>
                </div>
                <div style="display:flex;margin-left:20px;margin-top: 10px;">
                    <div class="risk_1">(9) 炎症性肠病</div>
                    <div class="risk_1">(10)慢性肾脏病</div>
                    <div class="risk_1">(11)胰腺炎</div>
                    <div class="risk_1">(12)肿瘤</div>
                    <div class="risk_1">(13)短肠综合症</div>
                    <div class="risk_1">(14)肌肉疾病</div>
                </div>
                <div style="display:flex;margin-left:20px;margin-top: 10px;">
                    <div class="risk_1">(15) 代谢性疾病</div>
                    <div class="risk_1">(16)创伤</div>
                    <div class="risk_1">(17)精神障碍/迟钝</div>
                    <div class="risk_1">(18)预期大手术</div>
                    <div class="risk_1">(19)法洛四联症</div>
                </div>
                <div style="display:flex;margin-left:20px;margin-top: 10px;">
                    <div class="risk_1">(20) 和两种以上疾病共存者</div>
                    <div class="risk_1">(21)为重度疾病，未明确 (由医生判断)</div>
                </div>
            </div>
            <div style="border:2px solid #2AB28B;padding: 10px 20px;border-top: none;"  @change="radi3">
                <div style="font-size:20px;font-weight:bold;">
                    3、营养的摄取与丢失 (1分) 
                </div>
                <div style="margin-left:20px;margin-top: 10px;margin-bottom: 10px;">
                    <el-radio-group v-model="radio3" class="ml-4">
                        <el-radio label="1" size="large" border>是否有以下症状之一              <span  style="margin-left:50px">1分</span></el-radio>
                        <el-radio label="0" size="large" border>无               <span  style="margin-left:50px">0分</span></el-radio>
                    </el-radio-group>
                </div>
                <div style="margin-left:20px;">
                    <div class="risk_1 risk_3"> (1)最近几天患儿存在腹泻(>5次/天)或呕吐(>3次/天)</div>
                    <div class="risk_1 risk_3">(2)入院前进食量减少(不包括为了手术或其他原因禁食)</div>
                    <div class="risk_1 risk_3">(3)支气管发育不良(最大年龄2岁)</div>
                    <div class="risk_1 risk_3">(4)入院前曾经进行营养干预</div>
                    <div class="risk_1 risk_3">(5)因为疼痛无法正常进食</div>
                </div>
            </div>
            <div style="border:2px solid #2AB28B;padding: 10px 20px;border-top: none;"  @change="radi4">
                <div style="font-size:20px;font-weight:bold;">
                    4、体重丢失或增长困难 (1分) 
                </div>
                <div style="margin-left:20px;margin-top: 10px;">
                    <el-radio-group v-model="radio4" class="ml-4">
                        <el-radio label="1" size="large" border>最近几周或几个月有体重减轻，或体重不增(婴儿小于1岁)               <span  style="margin-left:50px">1分</span></el-radio>
                        <el-radio label="0" size="large" border>无              <span  style="margin-left:50px">0分</span></el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div style="border:2px solid #2AB28B;padding: 10px 20px;border-top: none;">
                <div style="font-size:20px;font-weight:bold;">
                    总分：{{total}}
                </div>
                <div  style="margin-top:20px;margin-left: 20px;font-weight: bold;">
                    (4-5分为重度营养风险，1-3分为中度营养风险，0分为轻度营养风险)
                </div>
                <div style="margin-top:20px;margin-left: 20px;font-weight: bold;">
                    低风险:无需干预，定期复查体重，一周后再次评估营养风险。
                </div>
            </div>
            <div style="border:2px solid #2AB28B;padding: 10px 20px;border-top: none;font-size: 20px;font-weight: bold;">
               儿童营养不良评估筛查工具(STAMP)
            </div>
            <div style="border:2px solid #2AB28B;padding: 10px 20px;border-top: none;"  @change="radi5">
                <div style="font-size:20px;font-weight:bold;">
                    1、疾病对营养状况的影响
                </div>
                <div style="margin-left:20px;margin-top: 10px;">
                    <el-radio-group v-model="radi5" class="ml-4">
                        <el-radio label="2" size="large" border>有<span  style="margin-left:50px">3分</span></el-radio>
                        <el-radio label="1" size="large" border>可能有<span  style="margin-left:50px">2分</span></el-radio>
                        <el-radio label="0" size="large" border>无<span  style="margin-left:50px">0分</span></el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div style="border:2px solid #2AB28B;padding: 10px 20px;border-top: none;"  @change="radi6">
                <div style="font-size:20px;font-weight:bold;">
                    2、食物摄入变化
                </div>
                <div style="margin-left:20px;margin-top: 10px;">
                    <el-radio-group v-model="radi6" class="ml-4">
                        <el-radio label="2" size="large" border>未进食<span  style="margin-left:50px">3分</span></el-radio>
                        <el-radio label="1" size="large" border>较前进食减少<span  style="margin-left:50px">2分</span></el-radio>
                        <el-radio label="0" size="large" border>较前没有变化<span  style="margin-left:50px">0分</span></el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div style="border:2px solid #2AB28B;padding: 10px 20px;border-top: none;"  @change="radi7">
                <div style="font-size:20px;font-weight:bold;">
                    3、身高、体重测量(BMI)
                </div>
                <div style="margin-left:20px;margin-top: 10px;">
                    <el-radio-group v-model="radi7" class="ml-4">
                        <el-radio label="2" size="large" border> <span> WHZ(BMI)小于-3</span> <span  style="margin-left:50px">3分</span></el-radio>
                        <el-radio label="1" size="large" border> <span>WHZ(BMI)小于-2大于-3</span> <span  style="margin-left:50px">1分</span></el-radio>
                        <el-radio label="0" size="large" border> <span> WHZ(BMI)大于-2 </span><span  style="margin-left:50px">0分</span></el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div style="border:2px solid #2AB28B;padding: 10px 20px;border-top: none;">
                <div style="font-size:20px;font-weight:bold;">
                    总分：{{total2}}
                </div>
                <div  style="margin-top:20px;margin-left: 20px;font-weight: bold;">
                    总分1分及以下者，为低度营养风险；2-3分者，为中度营养风险；4分或者以上者，为高度营养风险。
                </div>
            </div>
            <div style="border:2px solid #2AB28B;padding: 10px 20px;border-top: none;font-size: 20px;font-weight: bold;">
              儿科约克山营养不良评分(PYMS)
            </div>
        </el-card>
       
        
    </div>
   <div style="display:flex;">
      <div v-if="Prints" style="margin:20px 0px;background-color: #2AB28B;width: 10%;height: 40px;line-height: 40px;text-align: center;color: #fff;border-radius: 40px;margin-left: 20px;cursor: pointer;" @click="Pint1" >
          <!-- <a href="" style="color: #fff;text-decoration:none;"></a> -->
          保存
      </div>
      <div v-if="Prints" style="margin:20px 0px;background-color: #2AB28B;width: 10%;height: 40px;line-height: 40px;text-align: center;color: #fff;border-radius: 40px;margin-left: 20px;cursor: pointer;" @click="Pint2" >
          <!-- <a href="" style="color: #fff;text-decoration:none;"></a> -->
          打印
      </div>
   </div>
  
    
  
  </template>
  
  <script setup>
  import { Edit, CirclePlus, Search, Expand,  } from '@element-plus/icons-vue'
  import {defineComponent, onMounted, ref, watch, reactive} from 'vue'
  import Header from './common/Header.vue';
  import ChildLeft from './common/ChildLeft.vue';
  import {useRoute, useRouter} from "vue-router"
  import http, {baseUrl} from "../utils/http";
  import Drawer from './common/Drawer.vue';
  import {ElMessage, ElMessageBox} from "element-plus";
  import * as api from "../api/loginHttp";
  const route = useRoute()
  const router = useRouter()
  const labName = ref()
  const options=ref([ {
      value: '早餐',
      label: '早餐',
    },
    {
      value: '中餐',
      label: '中餐',
    },
    {
      value: '晚餐',
      label: '晚餐',
    },])
    const checkList = ref([])
  const tan =  ref(true)
  const loadings = ref(true)
  const list = ref({})
  const energy = ref(0)
  const energys=ref()
  const OilEnergy = ref(0)
  const drawer = ref(false)
  const radio1=ref('')
  const radio2=ref('')
  const radio3=ref('')
  const radio4=ref('')
  const total=ref(0)
  const total2=ref(0)
  const userinfo=ref({})
  const Prints=ref('true')

  const groupId = ref()
  const id = ref()
  const reportId =ref()
  const popWrite = ref(false)
  const popWriteDirection = ref('ttb')
  const pageList = async () => {
    await router.push({'path': '/pageList/' + groupId.value})
  }
  const size = ref('150%')
  
  const formInline = ref({
    Fat:'',
    FatMin:'',
    FatMax:'',
    Bone:'',
    BoneMin:'',
    BoneMax:'',
    Protein:'',
    ProteinMin:'',
    ProteinMax:'',
    Water:'',
    WaterMin:'',
    WaterMax:'',
    LBM:'',
    ICW:'',
    Weight:'',
    WeightMin:'',
    WeightMax:'',
    Muscle:'',
    MuscleMin:'',
    MuscleMax:'',
    PBF:'',
    PBFMin:'',
    PBFMax:'',
    SMM:'',
    SMMMin:'',
    SMMMax:'',
    BMI:'',
    BMIMin:'',
    BMIMax:'',
    WHR:'',
    WHRMin:'',
    WHRMax:'',
    Weight_control:'',
    Fat_control:'',
    Muscle_control:'',
    VFI:'',
    VFIMin:'',
    VFIMax:'',
    Edema:'',
    EdemaMin:'',
    EdemaMax:'',
    ECW:'',
    BMR:'',
    name: '',
  })
  const onSubmit = () => {
  console.log('submit!')
}


  //保存表格
  const Pint1=()=>{
    console.log(parseInt(radio1.value),'sss')
    let arr=[parseInt(radio1.value),parseInt(radio2.value),parseInt(radio3.value),parseInt(radio4.value),parseInt(total.value)];
      http.get('api/archives/addScreening?id='+ id.value +'&screening='+JSON.stringify(arr)).then((res)=>{
      console.log(res,'新增用户筛查')
          if(res.data.code==1){
              ElMessage({
              message: '保存成功',
              type: 'success',
            })
          }
      })
      Prints.value=false;
      setTimeout(() => {
          }, 2000);
      setTimeout(()=>{
          Prints.value=true;   
      },3000)
    
  }
  //打印表格
  const Pint2=()=>{
    // Prints.value=false;
    // setTimeout(() => {
    //       print({id:"#pdfDom1"});
    //     }, 2000);
    // setTimeout(()=>{
    //     Prints.value=true;   
    // },3000)
    const { href } = router.resolve({
      path:  "/Risks/"+groupId.value+"/"+id.value+'/'+reportId.value
    });
    window.open(href, "_blank");
  }
  const onHome = async () => {
    await router.push({'path': '/Home'})
  }
  const radi1=()=>{
    total.value=parseInt(radio1.value)+parseInt(radio2.value)+parseInt(radio3.value)+parseInt(radio4.value);
  }
  const radi2=()=>{
    total.value=parseInt(radio1.value)+parseInt(radio2.value)+parseInt(radio3.value)+parseInt(radio4.value);
  }
  const radi3=()=>{
    total.value=parseInt(radio1.value)+parseInt(radio2.value)+parseInt(radio3.value)+parseInt(radio4.value);
  }
  const radi4=()=>{
    total.value=parseInt(radio1.value)+parseInt(radio2.value)+parseInt(radio3.value)+parseInt(radio4.value);
  }
  const onChange = async (index, value) => {
    list._rawValue[index].energy = (list._rawValue[index].single.energy * value).toFixed(2)
    list._rawValue[index].weight = (list._rawValue[index].single.weight * value).toFixed(2)
    list._rawValue[index].protein = (list._rawValue[index].single.protein * value).toFixed(2)
    list._rawValue[index].fat = (list._rawValue[index].single.fat * value).toFixed(2)
    list._rawValue[index].carbohydrate = (list._rawValue[index].single.carbohydrate * value).toFixed(2)
    list._rawValue[index].calcium = (list._rawValue[index].single.calcium * value).toFixed(2)
    list._rawValue[index].sodium = (list._rawValue[index].single.sodium * value).toFixed(2)
    list._rawValue[index].magnesium = (list._rawValue[index].single.magnesium * value).toFixed(2)
    list._rawValue[index].iron = (list._rawValue[index].single.iron * value).toFixed(2)
    list._rawValue[index].zinc = (list._rawValue[index].single.zinc * value).toFixed(2)
    list._rawValue[index].selenium = (list._rawValue[index].single.selenium * value).toFixed(2)
    list._rawValue[index].vitamin_a = (list._rawValue[index].single.vitamin_a * value).toFixed(2)
    list._rawValue[index].vitamin_e = (list._rawValue[index].single.vitamin_e * value).toFixed(2)
    list._rawValue[index].vitamin_b1 = (list._rawValue[index].single.vitamin_b1 * value).toFixed(2)
    list._rawValue[index].vitamin_b2 = (list._rawValue[index].single.vitamin_b2 * value).toFixed(2)
    list._rawValue[index].vitamin_c = (list._rawValue[index].single.vitamin_c * value).toFixed(2)
  
    energys.value = 0
    for (let i = 0; i < list._rawValue.length; i++) {
      energys.value +=(list._rawValue[i].energy)*1;
      console.log(list._rawValue[i].energy)
  
    }
  
  }
  
  const btn_fenxi = async() => {
    let params = {
      'id': reportId.value,
      'user_id':id.value,
      'diet_energy': energy._value,
      'diet':list._rawValue,
    }
  
    const data = await api.diet(params);
    
    if(data.data.code == 0) {
      ElMessage.error(data.data.msg)
      return false;
    } else {
      const { href } = await router.resolve({
        path:  "/Dietary/"+groupId.value+"/"+id.value+'/'+reportId.value
      });
      window.open(href, "_blank");
    }
  
  }
  
  const cancelClick = async() => {
    popWrite.value = false;
  }
  
  const confirmClick = async() => {
    Object.keys(formInline._rawValue).forEach(function(item, index) {
      //item 就是当日按循环到的对象
      //index是循环的索引，从0开始
        if (formInline._rawValue[item] == '') {
          ElMessage.error('必填项不能为空')
          return;
        }
      // console.log(formInline._rawValue[item]);
    })
  
  
  
    // for(let i = 0; i < Object.keys(formInline._rawValue).length; i++) {
    //   console.log(i);
    //   console.log(formInline._rawValue[i]);
    //   if (formInline.value[i] == '') {
    //     ElMessage.error('必填项不能为空')
    //     return false;
    //   }
    // }
  }
  
  const get_new = async() => {
    const res = await api.getFood();
  }
  
  // const handClick = async ()  => {
  //   console.log('手动输入体成分数据');
  // }
  
  const handClick = async ()  => {
    popWrite.value = true;
  }
  
  
  
  const appraisal = async ()  => {
    http.get('api/archives/analysis?id='+ id.value+'&type=analysis').then((res)=>{
      if(res.data.code === 0) {
        ElMessage.error(res.data.msg)
      }
    })
  }
  
  const guanbi = async ()  => {
    tan.value = false;
    http.get('api/archives/analysis?id='+ id.value+'&type=cancel').then((res)=>{
      if(res.data.code === 0) {
        ElMessage.error(res.data.msg)
      }
    })
  }
  
  const goto = async () => {
    const { href } = await router.resolve({
      path:  "/analysis/"+groupId.value+"/"+id.value+"/"+reportId.value
    });
    window.open(href, "_blank");
  }
  
  
  const btn = async() => {
    // // 只要点击文档，那么就将数据保存起来
    http.get('api/archives/setReportStatus?reportId='+ reportId.value).then((res)=>{
      if(res.data.code === 0) {
        ElMessage.error(res.data.msg)
        return false
      }
    })
    const { href } = await router.resolve({
      path:  "/reportView/"+groupId.value+"/"+id.value+"/"+reportId.value
    });
    window.open(href, "_blank");
  }
  
  const fetchData = async () => {
    if(parseInt(radio1.value)){
      total.value=parseInt(radio1.value)+parseInt(radio2.value)+parseInt(radio3.value)+parseInt(radio4.value);
    }else{
      total.value=0;
    }
    
    if(route.params.groupId) {
      groupId.value = route.params.groupId
      id.value = route.params.id
      reportId.value = route.params.reportId
      if (groupId.value == 3) {
        labName.value = '婴幼儿营养测评'
      } else if (groupId.value == 5) {
        labName.value = '孕产妇营养测评'
      } else if (groupId.value == 6) {
        labName.value = '成年人营养测评'
      } else if (groupId.value == 7) {
        labName.value = '慢性病营养测评'
      } else if (groupId.value == 8) {
        labName.value = '团体营养测评'
      }
    http.get('api/archives/evaluating?id='+ id.value).then((res)=>{
     console.log(res,'adadada')
     userinfo.value=res.data.data;
    })

    //获取营养风险筛查表
  http.get('api/archives/screeningInfo?id=' + route.params.id).then((res) => {
    if(res.data.data.screening){
      radio1.value=res.data.data.screening[0].toString();
      radio2.value=res.data.data.screening[1].toString();
      radio3.value=res.data.data.screening[2].toString();
      radio4.value=res.data.data.screening[3].toString();
      total.value=res.data.data.screening[4].toString();
    }
  })

  
      let ws = new WebSocket('ws://'+baseUrl+':1234');
      ws.onopen = function(){
        let uid = window.localStorage.getItem("MemberId");
        ws.send(uid);
      };
      ws.onmessage = function(e){
        loadings.value = true;
        energy.value = 0;
        let WebList = JSON.parse(e.data);
        for (let i = 0; i < WebList.list.length; i++) {
          WebList.list[i].single = {
            energy: WebList.list[i].energy,
            weight: WebList.list[i].weight,
            protein: WebList.list[i].protein,
            fat: WebList.list[i].fat,
            carbohydrate: WebList.list[i].carbohydrate,
            calcium: WebList.list[i].calcium,
            sodium: WebList.list[i].sodium,
            magnesium: WebList.list[i].magnesium,
            iron: WebList.list[i].iron,
            zinc: WebList.list[i].zinc,
            selenium: WebList.list[i].selenium,
            vitamin_a: WebList.list[i].vitamin_a,
            vitamin_e: WebList.list[i].vitamin_e,
            vitamin_b1: WebList.list[i].vitamin_b1,
            vitamin_b2: WebList.list[i].vitamin_b2,
            vitamin_c: WebList.list[i].vitamin_c,
            checkList:[]
  
          }
          energy.value = energy.value + Number(WebList.list[i].energy);
          energys.value=( energy.value).toFixed(2);
        
        }
  
        list.value = WebList.list;
        list.value.map((item,index)=>{
          console.log(item)
        })
  
        setTimeout(() => {
          loadings.value = false
        },1000);
      };
  
    } else {
      ElMessage.error('栏目编号不得为空')
      await router.push({'path': '/Home'})
    }
  
  }
  
  onMounted(() => {
    fetchData()
  })
  </script>
  
  <style scoped>
  
  
  @import '../assets/css/common.css';
  @media screen and (max-width:1920px) {
    .risk_1{
        margin-left: 30px;        
    }
    .risk_3{
        margin-bottom: 20px;        
    }
    .risk_2{
        margin-left: 10px;        
    }
  .right-box-card .all button{
    width: 85px;
    margin-right: 14px;
  }
  .el-drawer__body .drVal{
    padding-top: 50px;
  }
  }
  
  
  .BMIprimary {
    width: 268px;
    height: 70px;
    background: #2AB28B;
    opacity: 1;
    border-radius: 8px;
    font-size: 24px;
  }
  .BMIDefault {
    width: 268px;
    height: 70px;
    background: #fff;
    opacity: 1;
    color: #2AB28B;
    border-radius: 8px;
    font-size: 24px;
    border:1px solid #2ab28b;
  }
  .el-drawer__body {
    overflow: auto;
  }
  .el-drawer__container ::-webkit-scrollbar {
    display: none;
  }
  
  ::v-deep .el-button:focus, .el-button:hover {
    background: #2AB28B;
    color: #fff;
  }
  ::v-deep  .el-progress-bar__inner {
    background: #2AB28B;
  }
  </style>
  <style>
  .right-box-card {
    margin-left: 2%;
    margin-top: 1%;
    position: static;
    top: calc(260px);
    width: 60%;
    float: left;
  
  }
  
  .right-box-card .all span{
    margin-right: 5px;
    font-size: 14px;
  }
  
  .right-box-card .all .num1{
    width: 100px;
    border: none;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #3ea4aa;
  }
  .num {
    width: 62px;
    border: none;
    text-align: center;
    background: #fff;
  }
  
  .right-box-card .all button {
    display: inline-block;
    width: 96px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #3ea4aa;
    border-radius: 3px;
    color: #ffffff;
    font-size: 16px;
    float: right;
    margin-right: 40px;
    margin-top: 70px;
    border: none;
  }
  </style>
  